<template>
  <div id="help">
    <div class="head">
      <router-link class="return" to='/'><img src="../assets/return.png"></router-link>
      <span>帮助</span>
      <div class="navigation" v-on:click="navigation();">
        <img src="../assets/navigation.png">
        <span>导航</span>
      </div>
    </div>
    <div class="nav" v-show="flag">
      <router-link class="homepage1" to="/">
        <img src="../assets/homepage.png">
        <span>首页</span>
      </router-link>
      <router-link class="mine1" to="mine">
        <img src="../assets/mine.png">
        <span>我的</span>
      </router-link>
      <router-link class="search1" to="search">
        <img src="../assets/search.png">
        <span>搜索</span>
      </router-link>
    </div>
    <div class="bady">
      手机上如何支付？<br/>
      你可以通过支付宝的方式完成购买，确保交易安全。<br/>
      后续将开通财付通、网上银行的方式以方便购买。<br/>
      更多支付帮助>><br/><br/>
      关于退款<br/>
      1.2014年3月15日0点0分起，所有在线售卖的团购单均享受“随时退”和”过期退“服务（物流单、电影选座和酒店在线订除外） ；
      已停售的团购单享受其原有的售后服务，若原来不支持退款则依然不支持。<br/>
      2.退至美团余额：审核通过后，会在1个工作日内（少量商品需要3个工作日）把款项退回到您的美团账户；余额可在下次团购时直
      接冲抵现金，也可随时提现，暂不收取手续费。<br/>
      3.原路退回：审核通过后，会在3-10个工作日内（少量商品需额外增加3个工作日）把款项退回到您的原支付方，通过网银或支付宝
      等第三方支付平台进行支付的费用将直接退到原账户，充值卡或返利金额将退回到美团余额。<br/>
      更多消费者保障服务>><br/>
    </div>
    <div class="footer">
      <div class="footer-bar">
        <button class="login" @click="login">登录</button>
        <button class="register" @click="register">注册</button>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;城市:</span>
        <button class="location" @click="citys">西安</button>
      </div>
      <ul class="footer-nav">
        <li>
          <a class="react" @click="homepage">首页</a>
        </li>
        <li>|</li>
        <li><a class="react" @click="login">我的</a>
        </li>
        <li>|</li>
        <li><a class="react"  href="//i.meituan.com/client" data-source="(direct)">美团下载</a>
        </li>
        <li>|</li>
        <li><a class="react" href="//www.meituan.com?pcstyle=1">电脑版</a>
        </li>
        <li>|</li>
        <li><a class="react" @click="helps">帮助</a>
        </li>
      </ul>
      <div class="footer-links">友情链接：
        <a href="//m.maoyan.com/?channel=touch_group">猫眼电影</a>
        <a  href="//m.dianping.com">大众点评</a>
        <a href="https://i.meituan.com/awp/hfe/hotel-fe-itower_awp/journey/guide-download/index.html?refer_source=yqlj">美团旅行</a>
        <a href="//i.zhenguo.com" class="linkminsu">榛果民宿</a>
        <a href="//evt.dianping.com/synthesislink/9496.html">大众点评下载</a>
        <a href="https://xue.meituan.com/?from=mt0" class="linkschool">美团点评餐饮学院</a>
        <a href="https://i.meituan.com/awp/hfe/block/6c4bec785dce/11188/index.html">快驴进货商家合作</a>
      </div>
      <div class="footer-copyright">
        <div class="hr"></div>
        <span class="footer-copyright-text">©2018 美团网 <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">京ICP证070791号</a></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'help',
  data () {
    return {
      flag: false
    }
  },
  methods: {
    navigation: function () {
      this.flag = !this.flag
    },
    login () {
      this.$router.push('mine')
    },
    register () {
      this.$router.push('login')
    },
    citys () {
      this.$router.push('city')
    },
    homepage () {
      this.$router.push('/')
    },
    helps () {
      this.$router.push('help')
    }
  }
}
</script>

<style scoped lang="scss">
  #help{
    width: 6.4rem;
    margin: 0 auto;
  }
  .head{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    margin: 0 ;
    padding: 0;
    width: 100%;
    height: 1rem;
    background-color: #06c1ae;
    border-bottom:1px solid #21897d;
    .return{
      img{
        display: block;
        width: .5rem;
        height: .5rem;
        margin: .25rem;
      }
    }
    span{
      font-size: .4rem;
      line-height: 1rem;
      color: #fff;
    }
    .navigation{
      display: flex;
      flex-direction: column;
      align-content: center;
      margin-right: .2rem;
      width: .6rem;
      img{
        display: block;
        width: .4rem;
        height: .4rem;
        margin: .1rem ;
      }
      span{
        display: block;
        line-height: .4rem;
        font-size: .2rem;
        text-align: center;
      }
    }
  }
  .nav{
    margin: .05rem .05rem 0 0;
    width: 2rem;
    height: 2.4rem;
    flex-direction: column;
    background-color: #06c1ae;
    opacity: 0.9;
    display: flex;
    position: absolute;
    right: 0;
    z-index: 5;
    .homepage1,.mine1, .search1{
      display: flex;
      border-bottom: 1px solid #21897d;
      text-align: center;
      font-size: .35rem;
      line-height: .8rem;
      color: #fff;
    }
    img{
      display: block;
      width: .4rem;
      height: .4rem;
      margin: .2rem;
    }
  }
  .bady{
    display: block;
    font-size: .3rem;
  }
  .footer{
    height: 3.6rem;
    width: 6rem;
    margin: 0 auto;
    padding: .2rem;
    background-color: #f0efed;
    .footer-bar {
      font-size: .25rem;
      margin-bottom: .4rem;
      display: flex;
      justify-content: space-between;
      button{
        display: inline-block;
        width: 1.2rem;
        height: .6rem;
        border-radius: .06rem;
        font-size: .28rem;
        vertical-align: middle;
        line-height: .6rem;
        cursor: pointer;
        border: .02rem solid #06c1ae;
        padding: 0 .3rem;
        background: 0;
        color: #06c1ae;
      }
      .location{
        width: 1.8rem;
      }
      span{
        width: 1.2rem;
        text-align: center;
        line-height: .6rem;
        font-size: .3rem;
      }
    }
    .footer-nav{
      margin: 0;
      padding: .18rem 0;
      font-size: .22rem;
      display: flex;
      flex-direction:row;
      flex-wrap: nowrap;
      white-space: nowrap;
      justify-content: center;
      li{
        .line{
          color: black;
          line-height: 1.2rem;
        }
        a{
          display: block;
          height: 100%;
          overflow-x: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding: 0 .25rem;
          color: #06c1ae;
        }
      }
    }
    .footer-links{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      font-size: .24rem;
      margin: .3rem .2rem 0 .2rem;
      text-align: center;
      a{
        display: block;
        color: #06c1ae;
        font-size: .24rem;
        padding: 0 .2rem .1rem .3rem;
        text-align: center;
      }
      .linkminsu{
        margin: 0 0 0 .5rem;
      }
      .linkschool{
        margin: 0 0 0 .5rem;
      }
    }
    .footer-copyright {
      font-size: .05rem;
      text-align: center;
      position: relative;
      .hr {
        display: block;
        content: "";
        width: 100%;
        position: absolute;
        top: 50%;
        border-top: 1px solid #999;
        z-index: 2;
      }
      .footer-copyright-text {
        position: relative;
        width: 4rem;
        margin: 0 auto;
        color: #999;
        background-color: #f0efed;
        font-size: .05rem;
        display: flex;
        justify-content: center;
        z-index: 3;
        a{
          display: block;
          font-size: .05rem;
          color: #999;
        }
      }
    }
  }
</style>
